<template>
  <div class="pulldown">
      <ul>
          <li @click="select(0)" v-bind:class="{ red: $route.name == 'Index'}">首页</li>
          <li @click="select(1)" v-bind:class="{ red: $route.name == 'Hall'}">虚拟展厅</li>
          <li @click="select(2)" v-bind:class="{ red: $route.name == 'Meeting'}">最佳卫星会评选</li>
          <li @click="select(3)" v-bind:class="{ red: active == 3}">CSCO报道专题</li>
          <li @click="select(4)" v-bind:class="{ red: active == 4}">App活动</li>
      </ul>
  </div>
</template>

<script>
export default {
  name: 'pulldown',
  data () {
    return {
      msg: 'Welcome to Your Vue.js App2',
      active: 0
    }
  },
  methods: {
    select (val) {
      this.active = val
      switch(val) {
        case 0:
          this.$router.push({name: 'Index'})
          break
        case 1:
          this.$router.push({name: 'Hall'})
          break
        case 2:
          this.$router.push({name: 'Meeting'})
          break
        case 3:
          this.$router.push({name: 'Index'})
          break
      }
    }
  }
}
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style lang="less" scoped>


    .red {
        background-color: #cd0070;
    }

    .pulldown {
        position: absolute;
        right: 0;
        top: 50px;
        width: 60vw;
        height: 120vw;
        background-color: #454556;
        opacity: .95;
        color: #fff;
        font-size: 16px;
        text-align: right;
        line-height: 44px;
        box-shadow: #323237 -2px 0px 4.5px 0px,#323237 0px 2px 4.5px 0px ;
        z-index: 10;

        li {
            padding-right: 20px;
        }

    }

</style>
